// lazy是用来做懒加载，需要配合Suspense组件
// Suspense可以使用fallback的属性，用于在组件加载的过程中进行显示
import React, { useState, lazy, Suspense } from "react";

// import叫做import命令，它是同步引入的
// import Child from "./Child";

// import函数可以做异步引入
const Child = lazy(() => import("./Child"));

const App = () => {
  const [show, setShow] = useState(false);
  const fn = () => {
    setShow(true);
  };
  return (
    <>
      <h2>组件懒加载</h2>
      <button onClick={fn}>btn</button>
      <Suspense fallback={<div>loading...</div>}>{show && <Child />}</Suspense>
    </>
  );
};

export default App;
